<style lang="scss" scoped>
	.content {

		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav {
		width: 100%;
		height: 120rpx;
		padding: 0 30rpx;
		position: fixed;
		top: 0;
		left: 0;
	}


	.lists {
		padding: 30rpx;

		.list {

			width: 690rpx;
			padding-bottom: 10rpx;
			opacity: 1;
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
			overflow: hidden;
			margin-bottom: 30rpx;

			.head {
				width: 100%;

				.tips {
					width: 136rpx;
					border-bottom: 1px solid #eee;
					border-right: 1px solid #eee;

					.tip {
						height: 68rpx;
					}

					.actived {
						background: #fa5151;
						color: #fff;
					}
				}

				.ordernum {
					height: 136rpx;
					padding: 0 20rpx;
					flex: 1;
					border-bottom: 1px solid #eee;

					>view {
						height: 68rpx;
					}

					.between-flex {
						width: 100%;
					}
				}
			}

			.contains {
				width: 100%;
				padding: 20rpx;

				.text {
					width: 620rpx;
					line-height: 60rpx;
				}
			}

			.btns {
				height: 100rpx;
				justify-content: flex-end;

				padding: 20rpx;

				.btn {
					width: 150rpx;
					height: 68rpx;
					border: 2rpx solid #409eff;
					border-radius: 36rpx;
					margin-left: 50rpx;
				}

			}
		}
	}
</style>

<template>
	<view class="content">
		<view class="nav bgwhite between-flex f28">
			<view class="align-flex blue" @click="$go('/pages/index/index')">
				<u-icon name="arrow-left"></u-icon>退出查询
			</view>
			<view class="gray">共计<span class="red">{{total}}</span>条满足条件</view>
			<view class="align-flex blue" @click="back()">再次查询<u-icon name="arrow-right"></u-icon>
			</view>

		</view>
		<view style="height:120rpx;"></view>
		<view class="lists">
			<view class="list" v-for="item,index in list" :key="index">
				<view class="head flex">
					<view class="tips">
						<view class="tip f28 center-flex  actived" :style="'background:'+$degreeColor(item.degree)+';'">
							{{item.degree | degree}}
						</view>
						<view :style="{borderTop: '1px solid #eee;',
						color:$rangeTypeColor(item.rangeType)}" class="tip f28 center-flex ">{{item.rangeType | rangeType}}</view>
					</view>
					<view class="ordernum f28 c999">
						<view class="between-flex">
							<view class="f26">工单号: {{item.orderNum}}</view>
							<view class="f26" :style="'color:'+$statusColor(item.currState)+';'">
								{{item.currStateToName}}
							</view>
						</view>
						<view class="align-flex">建单时间: {{item.createTime}}</view>
					</view>
				</view>
				<view class="contains between-flex" @click="onItem(item)">
					<view class="text">
						<view><span class="c999">报修科室:</span><span>{{item.deptId | subject}}</span></view>
						<view><span class="c999">故障分类:</span><span>{{item.faultType | faultType}}</span></view>
						<view class="two"><span class="c999">故障描述:</span><span>{{item.faultRemark}}</span></view>
						<view v-if="item.detailInfo" class="two"><span
								class="c999 ">详细说明:</span><span>{{item.detailInfo}}</span></view>
						<view><span class="c999">响应类型:</span><span>{{item.responseType | responseType}}</span><span
								class="p-left10" v-if="item.appointment">{{item.appointment}}</span></view>
						<view><span class="c999">报修人:</span><span>{{item.createUserToName || '-'}}</span><span
								class="blue p-left20;" @click.stop="$makephone(item.phone)"
								style="text-decoration: underline;">{{item.phone}}</span></view>
					</view>
					<u-icon name="arrow-right" color="#98a5b3" size="28"></u-icon>
				</view>

			</view>
		</view>
		<view class="center-flex c999 f24" v-if="nomore">-没有更多了-</view>
		<view v-if="empty" style="position: fixed;top:40%;left:50%;transform: translateX(-50%);">
			<u-empty text="暂无列表"></u-empty>

		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				list: [],
				nomore: false,
				empty: false,
				options: {},
				total: 0
			}

		},
		onLoad() {
			this.options = uni.getStorageSync('options2')
			this.reset()
		},
		onReachBottom() {
			if (!this.nomore) {
				this.page++
				this.getlist()
			}
		},
		beforeDestroy() {
			uni.removeStorageSync('options2')
		},
		methods: {
			back() {
				uni.navigateBack({

				})
				uni.$emit('clear')
			},

			onItem(item) {
				// let {
				// 	currState,
				// 	orderNum,
				// 	createUserToName
				// } = item
				// if (currState === 'wait_appraisal') {

				// 	this.$navTo(`/pages/evaluation/index?orderNum=${orderNum}&reporter=${createUserToName}`)
				// } else {
				// }
					this.$navTo('/pages/myOrder/detail?orderNum=' + item.orderNum)
			},
			reset() {
				this.$showloading()
				this.page = 1
				this.list = []
				this.nomore = false
				this.getlist()
			},
			getlist() {
				this.options.pageSize = 10
				this.options.pageNum = this.page
				this.$pop.ajaxPost('/busOrderFault/getSearchPage', this.options).then(res => {
					uni.hideLoading()
					var list = res.body.list

					this.list = this.list.concat(list)
					this.total = res.body.total
					if (this.list.length == 0) {
						this.empty = true
					} else {
						this.empty = false
						if (list.length < 10) {
							this.nomore = true
						} else {
							this.nomore = false
						}
					}
					// console.log(this.list)
				})
			},
		}
	}
</script>
